<script setup>

</script>

<template>
  <div class="nav">
    <div class="wrap">
      <div class="nav-bar">
        <ul>
          <li><router-link to="/mainView">首页</router-link></li>
          <li><router-link to="/productManage">商品管理</router-link></li>
          <li><router-link to="/accountManage">用户管理</router-link></li>
          <li><router-link to="/OrderManage">订单管理</router-link></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="wrap">
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
.nav{
  width: 100%;
  height: 60px;
  overflow: hidden;
  border-bottom: 1px solid #c7c5c5;
}
.nav-bar{
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.nav-bar li{
  float: left;
  transition: all 0.5s;
}
.nav-bar li a{
  color: #000;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 18px;
  text-decoration: none;
}
.nav-bar li:hover {
  background-color: #7ea0f4;
}
.nav-bar a.router-link-active{
  background-color: #00ffff;
}
</style>
